<template>
  <div>
    <div>
      <el-input class="addJbInput" style="width: 300px;" placeholder="添加职称..." v-model="jl.name"
        suffix-icon="el-icon-circle-plus-outline" size="small">
      </el-input>
      <!-- 下拉框 -->
      <el-select v-model="jl.titleLevel" clearable placeholder="职称等级" size="small" style="margin-left: 8px;">
        <el-option v-for="item in titleLevels" :key="item" :label="item" :value="item">
        </el-option>
      </el-select>

      <el-button size="small" icon="el-icon-plus" type="primary" @click="addJoble"
        style="margin-left: 8px;">添加职称</el-button>
      <el-button type="danger" size="small" icon="el-icon-delete" :disabled="this.multipleSelection.length == 0"
        @click="deleteMany">批量删除</el-button>
    </div>
    <div style="margin-top: 8px;">
      <el-table :data="jls" v-loading="loading" style="width: 70%" stripe border size="small" @selection-change="handleSelectionChange">
        <!-- 批量删除 -->
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="id" label="编号" width="55">
        </el-table-column>
        <el-table-column prop="name" label="职称名称" width="150">
        </el-table-column>
        <el-table-column prop="titleLevel" label="职称等级" width="150">
        </el-table-column>
        <el-table-column prop="createDate" label="创建时间" width="150">
        </el-table-column>
        <el-table-column prop="enabled" label="是否启用" width="150">
          <!-- 获取row  scope -->
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.enabled">已启用</el-tag>
            <el-tag type="danger" v-if="!scope.row.enabled">未启用</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="shoEditView(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>


      <el-dialog title="编辑职称" :visible.sync="dialogVisible" width="30%">
        <div style="line-height: 40px;">
          <tr>
            <td>
              <el-tag>职称名称</el-tag>
            </td>
            <td>
              <el-input v-model="updateJoblevel.name" placeholder="请输入职位名称" size="small" style="margin-right: 8px;"
                class="updatePosInput"></el-input>
            </td>
          </tr>
          <tr>
            <td>
              <el-tag>职称等级</el-tag>
            </td>
            <td>
              <!-- 下拉框 -->
              <el-select v-model="updateJoblevel.titleLevel" clearable placeholder="职称等级" size="small" style="margin-left: 8px;">
                <el-option v-for="item in titleLevels" :key="item" :label="item" :value="item">
                </el-option>
              </el-select>
            </td>

          </tr>
          <tr>
            <td>
                <el-tag>是否启用</el-tag>
            </td>
            <td>
                <el-switch v-model="updateJoblevel.enabled" active-text="已启用" inactive-text="未启用" style="margin-left: 10px;">
                </el-switch>
            </td>
          </tr>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="doUpdate">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 添加数据
      jl: {
        name: '',
        titleLevel: '',
      },
      // 下拉框数据
      titleLevels: [
        '正高级',
        '副高级',
        '中级',
        '初级',
        '员级'
      ],
      // table 数据
      jls: [],
      // 批量删除length
      multipleSelection: [],
      // 修改参数
      updateJoblevel: {
        name: '',
        titleLevel: '',
        enabled: false,
        createDate : ''
      },
      dialogVisible: false,
      loading: true,
    }
  },
  methods: {
    // 初始化table
    initJls() {
      this.getRequest('/system/basic/joblevel/').then(resp => {
        if (resp) {
          this.jls = resp;
          this.jl.name = '';
          this.jl.titleLevel = '';
        }
      })
    },
    // 展示添加弹框
    shoEditView(index, row) {
      // console.log(index, row);
      // 展示弹出框
      this.dialogVisible = true;
      // 这里绑定了数据会变换
      // this.updatePos = row;
      // 数据拷贝
      Object.assign(this.updateJoblevel, row);
      // console.log(row);
    },
    // 删除
    handleDelete(index, row) {
      // console.log(index, row);
      this.$confirm('此操作将永久删除[' + row.name + ']职称, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteRequest('/system/basic/joblevel/' + row.id).then(resp => {
          if (resp) {
            this.initJls();
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // 批量删除选择当前行
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(val);
    },
    // 添加职称
    addJoble() {
      // 职称 和 等级 不能为空
      if (this.jl.name && this.jl.titleLevel) {
        console.log(this.jl);
        this.postRequest('/system/basic/joblevel/', this.jl).then(resp => {
          if (resp) {
            //重新加载table
            this.initJls();
          }
        })
      } else {
        this.$message.error('职称,职称等级不能为空 !');
      }
    },
    // 批量删除职称
    deleteMany() {
      this.$confirm('此操作将永久删除[' + this.multipleSelection.length + ']条职位, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let ids = '?';
        this.multipleSelection.forEach(item => {
          ids += 'ids=' + item.id + '&';
        })

        this.deleteRequest('/system/basic/joblevel/' + ids).then(resp => {
          if (resp) {
            this.initJls();
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    doUpdate() {
      this.updateJoblevel.createDate = '';
      this.putRequest('/system/basic/joblevel/', this.updateJoblevel).then(resp => {
        if (resp) {
            this.initJls();
            this.dialogVisible = false;
           }
       })
    },
    init() {
      setTimeout(() => {
        this.loading = false;
        // 初始化方法
        this.initJls();
      }, 3000);
    }
 
  },
  // 构造函数初始化
  mounted() {
    this.init();
  }
}
</script>

<style>
</style>